<template>
    <el-card shadow="always">
        <div class="avatar center-flex-box">
            <div class="icon">
                <img :src="user.avatar?user.avatar:defaultAvatar" @click="goToUserHome(user.id)"
                     class="face">
            </div>
        </div>
        <div class="name">
            <el-tooltip effect="dark" :content="user.nickname" placement="top">
                <a @click="goToUserHome(user.id)" class="nickname">{{user.nickname}}</a>
            </el-tooltip>
        </div>
    </el-card>
</template>

<script>
    import { mapGetters } from 'vuex'

    export default {
        name: 'simpleUserInfo',
        props: ['user'],
        computed: {
            ...mapGetters('user', [
                'defaultAvatar'
            ])
        },
        methods: {
            goToUserHome (id) {
                this.$router.push(`/user/info/${id}`)
            }
        }
    }
</script>

<style lang="scss" scoped>
    @import '../../../style/scss';

    .avatar {
        margin: 0 auto;

        .icon {
            width: 80px;
            height: 80px;
            padding: 5px;
            position: relative;
            border: #6e6e6e 5px double;

            .face {
                width: 100%;
                height: 100%;
                cursor: pointer;
            }
        }
    }

    .name {

        .nickname {
            font-size: 16px;
            text-align: center;
            margin: 8px 0;

            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
        }

        a {
            text-decoration: none;
            cursor: pointer;
        }

        a:link {
            color: #216278;
        }

        a:visited {
            color: #216278;
        }

        a:hover {
            color: rgba(255, 151, 60, 0.8);
        }

        a:active {
            color: rgba(255, 86, 25, 0.8);
        }
    }
</style>
